<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
</head>
<body>
<style type="text/css" media="screen">
	*{margin: 0;padding: 0;}
	body{
		font-size: 10px;
	}
	li{list-style: none;width: 25%;float: left;text-align: center;}
	.header{
		width: 100%;
		background-color: green;
		text-align: center;
		padding: 0.5rem 0;
		font-size: 0.6rem;
		color: #fff;
	}
	.container{
		width: 100%;
		overflow: hidden;
		margin-top: 0.2rem;
	}
	.content{
		width: 68%;
		background: blue;
		float: left;
		height: 10rem;
	}
	.silder{
		width: 30%;
		background: yellow;
		float: right;
		height: 10rem;
	}
	footer{
		font-size: 0.6rem;
	}
</style>
<div ng-app="myApp">
	<div class="header" ui-view="header"></div>
	<div class="container">
		<div class="content" ui-view="content"></div>
		<div class="silder" ui-view="silder"></div>
	</div>
</div>

<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
<script src="angular.min.js"></script>
<script src="angular-ui-router.js"></script>
<script type="text/javascript">
	var app =angular.module('myApp', ['ui.router']);
	var header={
		template:'<h1>header</h1>'
	}
	app.config(function($stateProvider,$urlRouterProvider) {
		console.log($urlRouterProvider);
		$stateProvider
			.state('home',{
				url:'/',
				views:{
					header:header,
					content:{
						template:'<h1>content</h1>'
					},
					silder:{
						template:'<h1>silder</h1>'
					}
				}
			})
			.state('movie',{
				url:'/movie',
				views:{
					header:header,
					content:{
						template:'<h1>movie header</h1>'
					},
					silder:{
						template:'<h1>movie header</h1>'
					}
				}
			})
		$urlRouterProvider
		.when('/food','/movie')
		.otherwise('/')
	})
	app.controller('movieCtrl', function($scope,$stateParams){
		console.log($stateParams);
		$scope.movie='星际迷航2';
		$scope.idIs=$stateParams.id;
		$stateParams.id='cba';
		console.log('id:'+$stateParams.id)
	})
</script>
</body>
</html>
<!--应该是14.11，时间-2017-05-08->